<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择地点</title>
</head>
<body>
<style>
    body {
        height: 100vh;
    }

    #app {
        height: 100%;
        width: 100%;
        padding: 0!important;
        display: flex;
        flex-direction: column;
    }


    .body {
        flex: 1;
    }

    #map-container {
        height: 100%;
        width: 100%;
    }

    /*.amap-logo{*/
    /*    display: none!important; !*去掉高德地图logo*!*/
    /*}*/
    /*.amap-copyright {*/
    /*   opacity:0!important; !*去掉高德的版本号*!*/
    /*}*/
    .tdt-control-copyright {
        /*去掉天地图LOGO*/
        display: none !important;
    }

    .top {
        padding: 12px 0px;
        position: relative;
    }


    .search-rel {
        position: absolute;
        z-index: 999999;
        background-color: #fff;
        left: 0;
        right: 0;
        border-left: 1px solid #d9d9d9;
        border-right: 1px solid #d9d9d9;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        box-shadow: 0 3px 12px 0 rgba(0, 0, 0, .2);
    }

    .search-rel ul.search-rel-list {
        padding: 0;
        margin: 0 0 12px 0;
        border-bottom: 1px solid #f5f5f5;
    }

    .search-rel .search-rel-list li {
        list-style: none;
        padding: 6px 12px;
        cursor: pointer;
        color: #8c8c8c;
    }

    .search-rel .search-rel-list li + li {
        border-top: 1px dashed #efefef;
    }

    .search-rel .search-rel-list li:hover {
        background-color: #fafafa;
    }

    .search-rel .search-rel-list li b {
        padding-right: 12px;
        color: #000;
    }

    .search-rel .ant-pagination {
        margin-bottom: 8px;
    }
    .foot{
        padding: 12px;
        display: flex;
    }
    .foot .select-info{
        flex: 1;
    }
</style>
<div id="app" style="display: none">
    <div class="top">
        <div class="input-box" @click="relShow=relShow||(searchValue&&searchValue!=='')">
            <a-input type="text" id="map-select-search-input" placeholder="输入关键字查找地区" v-model:value="searchValue"
                     @press-enter="doSearch">
                <template #prefix>
                    <search-outlined type="user"></search-outlined>
                </template>
            </a-input>
        </div>
        <div class="search-rel" v-show="searchValue&&searchValue!==''&&relShow">
            <div v-if="list.length>0">
                <ul class="search-rel-list">
                    <li v-for="item in list" @click="selectRel(item)"><b>{{ item.name }}</b>{{ item.address }}</li>
                </ul>
                <a-pagination size="small" v-model:current="page" :page-size="pageSize" :total="count"
                              @change="pageChange"/>
            </div>
            <div v-else style="color: #d9d9d9;padding: 16px 24px">
                (未找到相关信息)
            </div>
        </div>
    </div>
    <div class="body">
        <div id="map-container"></div>
    </div>
    <div class="foot">
        <div class="select-info">{{selectAddr}}</div>
        <div class="check-btns">
            <a-button type="primary" :disabled="selectMk===null" @click="selected">确认选中</a-button>
        </div>
    </div>
</div>
<script src="/tp-script-vue-curd-static.php?vue3/vue.global.prod.js" charset="utf-8"></script>
<script src="/tp-script-vue-curd-static.php?ant-design-vue/antd.min.js" charset="utf-8"></script>
<script>
    function getQueryVariable(variable)
    {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (let i=0;i<vars.length;i++) {
            let pair = vars[i].split("=");
            if(pair[0].toString() === variable.toString()){return pair[1];}
        }
        return false;
    }
    //生成随机 GUID 数
    window.guid = function () {
        function S4() {
            return (((1 + Math.random()) * 65536) | 0).toString(16).substring(1)
        }

        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4())
    };
    window.map = null;
    window.placeSearch=null;
    window.geocode =null;
    const option = {
        setup(props, ctx) {
        },
        data() {
            return {
                searchValue: null,
                lastSearch: null,
                list: [],
                page: 1,
                pageSize: 10,
                count: 0,
                relShow: false,
                marker: null,
                selectMk:null,
                selectAddr:'',
            }
        },
        watch:{
            searchValue(){
                this.doSearch()
            },
        },
        mounted() {
            document.getElementById('app').style.display='flex'
            window.mapInit = () => {
                const checkHaveObjs = setInterval(() => {
                    if (typeof T !== 'undefined' && typeof T.Map !== 'undefined') {
                        clearInterval(checkHaveObjs);
                        this.initMap();
                    }
                }, 20)
            }
            let jsapi = document.createElement('script'), jsapi2 = document.createElement('script');
            jsapi2.src = 'https://webapi.amap.com/maps?v=1.4.15&key=2c89c6178dc817d34ad9783867366c14&callback=mapInit&plugin=AMap.DistrictSearch';
            jsapi.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=dd78fa8009cfc85f584b62039a504a61';
            document.head.appendChild(jsapi2);
            document.head.appendChild(jsapi);
            document.addEventListener('click', e => {
                if (e.target.closest('.search-rel') || e.target.matches('.search-rel') || e.target.closest('.input-box') || e.target.matches('.input-box')) {
                    return;
                }
                this.relShow = false;
            })
        },
        methods: {
            initMap() {
                const imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
                    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=dd78fa8009cfc85f584b62039a504a61";
                //创建自定义图层对象
                const lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});

                const imageURL2 = "http://t0.tianditu.gov.cn/cia_w/wmts?" +
                    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=dd78fa8009cfc85f584b62039a504a61";
                const lay2 = new T.TileLayer(imageURL2, {
                    minZoom: 1,
                    maxZoom: 18
                });

                let ct=getQueryVariable('center');
                let defCenter = ct&&ct!==','?new T.LngLat(ct.split(',')[0], ct.split(',')[1]):new T.LngLat(120.12, 30.19);

                const config = {layers: [lay, lay2]};
                //初始化地图对象
                window.map = new T.Map("map-container", config);
                //设置显示地图的中心点和级别
                window.map.centerAndZoom(defCenter, 9);
                //允许鼠标滚轮缩放地图
                window.map.enableScrollWheelZoom();


                const setMark= (lngLat)=>{
                    if(!this.selectMk){
                        this.selectMk = new T.Marker(lngLat); // 创建点
                        const icon=new T.Icon({
                            iconUrl:'https://webapi.amap.com/theme/v1.3/markers/n/mark_rs.png',
                            iconAnchor:new T.Point(9,32)
                        })
                        this.selectMk.setIcon(icon)
                        // icon.setIconUrl('https://webapi.amap.com/theme/v1.3/markers/n/mark_rs.png');
                        window.map.addOverLay(this.selectMk);
                    }else{
                        this.selectMk.setLngLat(lngLat)
                    }
                    window.map.centerAndZoom(lngLat, 18);
                    geocode.getLocation(lngLat,result=>{
                        this.selectAddr=result.getAddress()
                    });
                }
                window.geocode = new T.Geocoder();
                window.map.addEventListener("click",e=>{
                    setMark(e.lnglat)
                });


                Vue.nextTick(() => {
                    function initMark(){
                        if(window.mapSelect){
                            const lnglat=window.mapSelect.split(',')
                            setMark(new T.LngLat(lnglat[0],lnglat[1]))
                        }else if(window.mapCenter){
                            window.map.centerAndZoom(new T.LngLat(window.mapCenter[0], window.mapCenter[1]), 13);
                        }
                    }
                    if(window.mapSelect){
                        initMark();
                    }else{
                        window.initSelect=initMark;
                    }


                    this.mapInput();
                })
            },
            mapInput() {
                //创建搜索对象
                window.placeSearch = new T.LocalSearch(window.map, {
                    pageCapacity: 10,	//每页显示的数量
                    onSearchComplete: result => {
                        this.count = result.getCount();
                        this.page = window.placeSearch.getPageIndex()
                        this.list = result.getPois() || [];
                        this.relShow = true;

                    },//接收数据的回调函数
                });
            },
            doSearch() {
                if (this.searchValue.replace(/\n/g, '') === '') {
                    return;
                }
                window.placeSearch.search(this.searchValue, 1);
            },
            pageChange(page) {
                window.placeSearch.gotoPage(page)
            },
            selectRel(rel){
                const arr=rel.lonlat.split(' ');
                const lngLat=new T.LngLat(arr[0], arr[1]);
                if(!this.marker){
                    this.marker = new T.Marker(lngLat); // 创建点
                    // // const icon=this.marker.getIcon();
                    // const icon=new T.Icon({
                    //     iconUrl:'https://webapi.amap.com/theme/v1.3/markers/n/mark_rs.png',
                    //     iconAnchor:new T.Point(9,32)
                    // })
                    // this.marker.setIcon(icon)
                    // // icon.setIconUrl('https://webapi.amap.com/theme/v1.3/markers/n/mark_rs.png');
                    window.map.addOverLay(this.marker);
                }else{
                    this.marker.setLngLat(lngLat)
                }
                window.map.centerAndZoom(lngLat,18);
                this.relShow=false;
            },

            selected(){
                if(this.selectMk===null){
                    return;
                }
                const lngLat=this.selectMk.getLngLat();
                window.onMapSelected(lngLat.lng+','+lngLat.lat)
            }
        }
    };

    window.app = Vue.createApp(option)
    app.use(antd)
    app.component('SearchOutlined', {
        template: `<span role="img" aria-label="search" class="anticon anticon-search"><svg class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span>`
    })
    app.mount('#app')
</script>
</body>
</html>